<template>
    
    <div class="about" >
        <WeatherHead />
        <div class="about-loading" v-if="!cityItemStore.showCityWeather">
            正在加载数据...
        </div>
        <div class="about-content" v-else>
            <div class="content-title">你正在预览{{ cityItemStore.showCity.name }}的天气，可以通过右上角的"+"号按钮保存</div>
            <div class="content-body" v-if="cityItemStore.showCity.weather">
                <div>当前气温是：{{ cityItemStore.showCity.weather.temperature || cityItemStore.showCity.weather.temperature_float }}℃</div>
                <div>当前天气是：{{ cityItemStore.showCity.weather.weather }}</div>
                <div>当前风向是：{{ cityItemStore.showCity.weather.winddirection }}风</div>
                <div>当前风力是：{{ cityItemStore.showCity.weather.windpower }}级</div>
            </div>
            <div v-else class="content-body">
                <div>正在加载天气数据...</div>
            </div>
            <div v-if="cityItemStore.showCityWeather && cityItemStore.showCityWeather.length > 0">
                <WeatherBody :weatherData="cityItemStore.showCityWeather" />
            </div>
            <div v-else class="loading-chart">
                <div>正在加载天气图表...</div>
            </div>
            <Teleport to=".weather-head-right">
                <i class="iconfont icon-jiahao" @click="saveCity" :style="{display: showInlist ? 'none' : 'block'}"></i>
            </Teleport>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useCityItemStore } from '@/stores/CityItem';
import WeatherBody from '@/components/WeatherBody.vue';
import WeatherHead from '@/components/WeatherHead.vue';
import NotFound from '@/views/NotFound.vue';

const route = useRoute()
const router = useRouter()
const routeAdcode = route.params.adcode
const cityItemStore = useCityItemStore()
const showInlist = ref(false)

onMounted(() => {
    if (routeAdcode) {
        // 确保在组件挂载时设置showCity
        setTimeout(() => {
            cityItemStore.getCityWeather(routeAdcode).then(() => {
                // 检查城市是否存在
                if (!cityItemStore.showCity) {
                    router.push({ name: 'NotFound' }) // 重定向到NotFound页面
                }
            })
        })
    }
    // 检查城市是否在列表中
    showInlist.value = cityItemStore.cityList?.some(item => item.adcode === routeAdcode) || false;
})

const saveCity = () => {
    if (cityItemStore.showCity) {
        cityItemStore.addCity()
        showInlist.value = true
    }
}
</script>

<style lang='scss' scoped>
@import "https://at.alicdn.com/t/c/font_4869878_glagdbt07ww.css";

.about{
    background-color: #00668a;
    min-height: 100vh;
    .about-content{
        .content-title{
            text-align: center;
            color: white;
            background-color: rgb(0, 78, 113);
            height: 40px;
            line-height: 40px;
        }
        .content-body{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            gap: 20px;
            margin-top: 25px;
        }
        .loading-chart {
            color: white;
            text-align: center;
            padding: 50px 0;
        }  
    }
    i{
        font-size: 1.5rem;
        color: white;
        cursor: pointer;
    }
    .about-loading{
        color: white;
        text-align: center;
        padding: 50px 0;
    }
}
</style>